import { useState } from 'react'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import Button from '@/components/Button/button'
import Alert from '../src/components/Alert/alert'
import Menu from '../src/components/Menu/menu'
import MenuItem from '../src/components/Menu/menuItem'
import SubMenu from '../src/components/Menu/subMenu'
import Tabs from '../src/components/Tabs/tabs'
import TabItem from '../src/components/Tabs/tabItem'
import Icon from '../src/components/Icon/icon'
import Input from '../src/components/Input/input'
import AutoComplete, { DataSourceType } from '../src/components/AutoComplete/autoComplete'

library.add(fas)

export interface LakerProps {
  value:string,
  number?:number
}

function App() {
  const [count, setCount] = useState(0)
  const [iptValue, setIptValue] = useState('')
  const handleClear = () => {
    console.log('test success');
  }
  const selectOptions = ['aaa','bbb','ccc','abc','ace','ccef']
  const lakersWithNumber:LakerProps[] = [
    {value: 'bradley', number: 11},
    {value: 'pope', number: 1},
    {value: 'caruso', number: 4},
    {value: 'cook', number: 2},
    {value: 'cousins', number: 15},
    {value: 'james', number: 23},
    {value: 'AD', number: 3},
    {value: 'green', number: 14},
    {value: 'howard', number: 39},
    {value: 'kuzma', number: 0},
  ] 
  // const handleFetch = (query:string) => {
  //   return lakersWithNumber.filter((item,index) => {
  //     return item.value.includes(query)
  //   })
  // }
  // 异步
  const handleFetch = (query:string) => {
    return fetch(`https://api.github.com/search/users?q=${query}`)
    .then(res => res.json())
    .then(({ items }) => {
      console.log(items);
      
      return items.slice(0,10).map((item:any) => ({ value:item.login,...item }))
    })
  }
  // 自定义模板
  const renderOption = (item:DataSourceType) => {
    const itemWithGithub = item as DataSourceType & {
      url: string
    }
    return (
      <>
        <div>Name：{itemWithGithub.value}</div>
        <div>Url：{itemWithGithub.url}</div>
      </>
    )
  }

  return (
    <>
      <div className="card">
        <Button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </Button>
        <Button btnType="primary">点击</Button>
        <Button btnType="primary" disabled>按钮</Button>
        <Button btnType="warning">按钮</Button>
        <Button btnType="success">按钮</Button>
        <Button btnType="danger" size="lg">按钮</Button>
        <Button btnType="danger" size="sm">按钮</Button>
        <Button btnType="link" href='http://www.baidu.com'>去往百度</Button>
        <Button btnType="link" disabled href='http://www.baidu.com'>点击</Button>
      </div>
      <div>Menu组件</div>
      <div>
      <Menu mode='horizontal' defaultOpenSubMenus={['2']} defaultIndex='1'>
        <MenuItem>132456</MenuItem>
        <MenuItem>456789</MenuItem>
        <SubMenu title="dropdown">
          <MenuItem>dropdown_1</MenuItem>
          <MenuItem>dropdown_2</MenuItem>
          <MenuItem>dropdown_3</MenuItem>
        </SubMenu>
        <MenuItem>aaa</MenuItem>
        <MenuItem>bbb</MenuItem>
        <MenuItem>ccc</MenuItem>
      </Menu>
      </div>
      
      <div>Tabs组件</div>
      <div>
      <Tabs type='line' size='small'>
        <TabItem label="line1">this is line1</TabItem>
        <TabItem label="line2">this is line2</TabItem>
        <TabItem label="line3" disabled>this is line3</TabItem>
        <TabItem label="line4">this is line4</TabItem>
        <TabItem label="line5">this is line5</TabItem>
      </Tabs>
      </div>
      
      <div>Icon组件</div>
      <div>
        <Icon icon='coffee' theme='primary' size='2x'/>
      </div>

      <div>input组件</div>
      <div>
        <Input style={{ width: '300px' }} icon='search' allowClear/>
        <Input style={{ width: '300px' }} allowClear onClear={handleClear} value={iptValue} onChange={(e) => setIptValue(e.target.value)}/>
        <Input style={{ width: '300px' }} append='.com' placeholder='后缀为.com'/>
        <Input style={{ width: '300px' }} prepend="https://" placeholder='前缀为https://' />
        <Input style={{ width: '300px' }} disabled placeholder='禁用框' />
      </div>
      
      <div>AutoComplete组件</div>
      <AutoComplete
        allowClear
        fetchSuggestions={handleFetch}
        renderOption={renderOption}
      />
      
      {/* Alert组件 */}
      <div> 
        <Alert showIcon type='success' message='alert' closable />
        <Alert showIcon type='info' message='alert' closable />
        <Alert 
          type='primary' 
          message='alert' 
          showIcon
          closable
          description='描述：Error Description Error Description Error
          Description Error Description Error Description Error 
          Description' 
          />
      </div>
      
      
    </>
  )
}

export default App